import React from 'react'
import {
    Center, Flex, Image, Box, Tabs,
    TabList,
    Tab,
    TabPanel,
    TabPanels,
} from '@chakra-ui/react'
import JsBg from '../img/js-bg.png'
import SignIn from '../components/SignIn'
import SignUp from '../components/SignUp'

export default function JianshuIndex() {
    return (<div>
        <Center bg='#f1f1f1' h='100vh'>
            <Flex width="820px" h="500px" justifyContent="center">
                <Image w="40%" h="400px" src={JsBg} alt='Dan Abramov' />
                <Box p="50px 50px 30px" w='400px' bg="#fff" mx="auto" >
                    <Tabs>
                        <TabList marginBottom="50px" justifyContent="center">
                            <Tab  _focus={{ boxShadow: "none" }}>登录</Tab>
                            <b>·</b>
                            <Tab _focus={{ boxShadow: "none" }}>注册</Tab>
                        </TabList>
                        <TabPanels>
                            <TabPanel padding="0px">
                            <SignIn />
                            </TabPanel>
                            <TabPanel padding="0px">
                            <SignUp />

                            </TabPanel>
                        </TabPanels>
                    </Tabs>
                </Box>
            </Flex>
        </Center>
    </div>)
}